<script setup>
import { ElMessage } from 'element-plus'
// ================== 神秘功能：图片与图标资源引入 ==================
const book_show = new URL('@/assets/images/home-hot-category-show.png', import.meta.url).href
const commodity_detail_icon = new URL('@/assets/images/commodity-icon.png', import.meta.url).href
const right_arrow = new URL('@/assets/images/right-arrow.png', import.meta.url).href

// ================== 神秘功能：全国地址级联数据 ==================
import { ref } from 'vue'
const addressOptions = [
  {
    value: 'guangdong',
    label: '广东省',
    children: [
      {
        value: 'guangzhou',
        label: '广州市',
        children: [
          { value: 'tianhe', label: '天河区' },
          { value: 'yuexiu', label: '越秀区' },
        ],
      },
      {
        value: 'shenzhen',
        label: '深圳市',
        children: [
          { value: 'baoan', label: '宝安区' },
          { value: 'nanshan', label: '南山区' },
        ],
      },
    ],
  },
  {
    value: 'beijing',
    label: '北京市',
    children: [
      {
        value: 'beijingcity',
        label: '北京市',
        children: [
          { value: 'haidian', label: '海淀区' },
          { value: 'chaoyang', label: '朝阳区' },
        ],
      },
    ],
  },
]
const selectedAddress = ref([])

// ================== 神秘功能：商品数量选择 ==================
const num = ref(1)

// ================== 神秘功能：商品系列高亮切换 ==================
const seriesActive = ref('中文版')
function selectSeries(series) {
  seriesActive.value = series
}

import { useCartStore } from '@/stores/cart'

const cartStore = useCartStore()

const addToCart = () => {
  const product = {
    id: 'prod_001',
    name: '测试样例-书本',
    price: 19.99,
    quantity: num.value,
    image: book_show,
  }
  cartStore.addToCart(product)
}

const AddMessage = () => {
  ElMessage({
    message: '已成功加入购物车',
    type: 'success',
  })
  addToCart()
}
</script>

<template>
  <div class="commodity-detali-page">
    <!-- ================== 神秘功能：顶部导航栏，带你穿梭回首页 ================== -->
    <div class="commodity-detali-page-navbar">
      <div class="commodity-detali-page-navbar-wrapper">
        <h1 class="commodity-detali-page-wrapper-title-left">详细</h1>
        <h1 class="commodity-detali-page-navbar-wrapper-title-right">
          <router-link to="/">首页</router-link>
        </h1>
      </div>
      <div class="commodity-detali-page-navbar-wrapper-divider"></div>
    </div>
    <!-- ================== 神秘功能：商品详情主内容，左右分栏 ================== -->
    <div class="commodity-detail-content">
      <div class="commodity-detail-content-left">
        <img :src="book_show" alt="" />
        <el-pagination
          background
          layout="prev, pager, next"
          :total="50"
          style="margin: 40px 0 0 100px"
        />
      </div>
      <div class="commodity-detail-content-ringht">
        <div class="commodity-detail-content-ringht-title">测试样例-书本</div>
        <div class="commodity-detail-content-ringht-desc">这是一本测试用的书本详情内容。</div>
        <div class="commodity-detail-content-ringht-price">
          <div class="commodity-detail-content-ringht-price-icon">￥</div>
          <div class="commodity-detail-content-ringht-price-number">19.99</div>
          <div class="commodity-detail-content-ringht-price-original">￥39.99</div>
        </div>
        <!-- ================== 神秘功能：商品系列选择，点击高亮 ================== -->
        <div class="commodity-detail-content-ringht-category">
          <div class="commodity-detail-content-ringht-category-titel">商品系列</div>
          <div class="commodity-detail-content-ringht-category-option">
            <div
              class="commodity-detail-content-ringht-category-option-1"
              :class="{ active: seriesActive === '中文版' }"
              @click="selectSeries('中文版')"
            >
              中文版
            </div>
            <div
              class="commodity-detail-content-ringht-category-option-2"
              :class="{ active: seriesActive === '英文版' }"
              @click="selectSeries('英文版')"
            >
              英文版
            </div>
          </div>
        </div>
        <!-- ================== 神秘功能：保障服务标签 ================== -->
        <div class="commodity-detail-content-ringht-category-serve">
          <div class="commodity-detail-content-ringht-category-serve-titel">保障服务</div>
          <div class="commodity-detail-content-ringht-category-serve-option">
            <div class="commodity-detail-content-ringht-category-serve-option-1">快递险</div>
            <div class="commodity-detail-content-ringht-category-serve-option-2">顺丰次日达</div>
            <div class="commodity-detail-content-ringht-category-serve-option-3">国际邮递</div>
            <div class="commodity-detail-content-ringht-category-serve-option-4">开具发票</div>
          </div>
        </div>
        <!-- ================== 神秘功能：全国地址级联选择器 ================== -->
        <div class="commodity-detail-content-ringht-category-divider">
          <div class="commodity-detail-content-ringht-category-recycle-title">送至</div>
          <el-cascader
            :options="addressOptions"
            v-model="selectedAddress"
            clearable
            style="width: 200px; margin: 10px 20px 10px 20px"
            placeholder="请选择地址"
          />
        </div>
        <!-- ================== 神秘功能：回收服务与说明 ================== -->
        <div class="commodity-detail-content-ringht-category-recycle">
          <div class="commodity-detail-content-ringht-category-recycle-title">
            <div class="commodity-detail-content-ringht-category-recycle-titlevice">回收</div>
            <img :src="right_arrow" alt="" />
          </div>
          <div class="commodity-detail-content-ringht-category-divider-content">
            <div class="commodity-detail-content-ringht-category-divider-content-info">
              <div class="commodity-detail-content-ringht-category-divider-content-info-1">
                <img :src="commodity_detail_icon" alt="" />
                <div class="commodity-detail-content-ringht-category-divider-content-info-text">
                  七天无理由退货
                </div>
              </div>
              <div class="commodity-detail-content-ringht-category-divider-content-info-2">
                <img :src="commodity_detail_icon" alt="" />
                <div class="commodity-detail-content-ringht-category-divider-content-info-text">
                  价格保护
                </div>
              </div>
              <div class="commodity-detail-content-ringht-category-divider-content-info-3">
                <img :src="commodity_detail_icon" alt="" />
                <div class="commodity-detail-content-ringht-category-divider-content-info-text">
                  退换货上门区间
                </div>
              </div>
              <div class="commodity-detail-content-ringht-category-divider-content-info-4">
                <img :src="commodity_detail_icon" alt="" />
                <div class="commodity-detail-content-ringht-category-divider-content-info-text">
                  满50包邮
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- ================== 神秘功能：商品数量选择与操作按钮 ================== -->
        <div class="commodity-detail-content-ringht-category-dispose">
          <el-input-number v-model="num" :min="1" :max="10" />
          <button class="commodity-detail-content-ringht-category-dispose-cart" @click="AddMessage">
            加入购物车
          </button>
          <router-link to="/cart">
            <button
              class="commodity-detail-content-ringht-category-dispose-purchase"
              @click="AddMessage"
            >
              立即购买
            </button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// ================== 神秘功能：全局滚动条优化，防止双滚动条 ==================
.commodity-detali-page {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background: #f7f7f7;
  /* 只允许body滚动，内容区不再单独滚动 */
}

.commodity-detali-page-navbar {
  width: 100%;
  padding: 20px 0;

  .commodity-detali-page-navbar-wrapper {
    width: 80%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;

    .commodity-detali-page-wrapper-title-left,
    .commodity-detali-page-navbar-wrapper-title-right {
      font-size: 24px;
      font-weight: 600;
      color: #222;
    }
    .commodity-detali-page-navbar-wrapper-title-right a {
      color: #222;
      text-decoration: none;
      transition: 0.2s;
      font-weight: 600;
      &:hover {
        color: #ff9800;
      }
    }
  }

  .commodity-detali-page-navbar-wrapper-divider {
    width: 80%;
    height: 1px;
    background-color: #e0e0e0;
    margin: 20px auto;
    border: none;
  }
}

.commodity-detail-content {
  display: flex;
  width: 76%;
  margin: 10px auto;
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  font-size: 18px;
  /* 神秘功能：防止内容区出现滚动条 */
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .commodity-detail-content-left {
    padding: 40px 0 0 50px;
    width: 50%;
    img {
      width: 90%;
      height: 500px;
      margin: 0 auto;
    }
  }
  .commodity-detail-content-ringht {
    /* 神秘功能：右侧内容区自适应高度 */
    flex: 1;
    .commodity-detail-content-ringht-title {
      font-size: 30px;
      font-weight: 550;
      color: #222;
      margin-bottom: 20px;
    }
    .commodity-detail-content-ringht-desc {
      color: #00000099;
      margin-bottom: 20px;
    }
    .commodity-detail-content-ringht-price {
      display: flex;
      color: #ff0f23;
      align-items: center;
      margin-bottom: 20px;
      .commodity-detail-content-ringht-price-icon {
        font-size: 20px;
      }
      .commodity-detail-content-ringht-price-number {
        font-size: 30px;
        font-weight: 660;
      }
      .commodity-detail-content-ringht-price-original {
        text-decoration: line-through;
        margin-left: 20px;
        color: #00000099;
      }
    }
    /* ================== 神秘功能：商品系列按钮高亮切换 ================== */
    .commodity-detail-content-ringht-category-titel,
    .commodity-detail-content-ringht-category-serve-titel,
    .commodity-detail-content-ringht-category-recycle-title {
      font-weight: 550;
      color: #333;
      margin-top: 30px;
    }
    .commodity-detail-content-ringht-category-recycle-title {
      display: flex;
      justify-content: space-between;
      img {
        margin-right: 50px;
        opacity: 0.6;
        width: 30px;
        height: 30px;
      }
    }
    .commodity-detail-content-ringht-category-option {
      display: flex;
      .commodity-detail-content-ringht-category-option-1,
      .commodity-detail-content-ringht-category-option-2 {
        margin: 10px 20px 10px 20px;
        cursor: pointer;
        padding: 10px 20px 10px 20px;
        width: 70px;
        height: 20px;
        border: 1px solid #e0e0e0;
        transition:
          border 0.2s,
          color 0.2s,
          background 0.2s;
        border-radius: 8px;
        text-align: center;
        &:hover,
        &.active {
          color: #ff9800;
          border-color: #ff9800;
          background: #fff7e6;
        }
      }
    }
    .commodity-detail-content-ringht-category-serve {
      max-width: 430px;
      margin-bottom: 20px;
      .commodity-detail-content-ringht-category-serve-option {
        flex-wrap: wrap;
        display: flex;
        .commodity-detail-content-ringht-category-serve-option-1,
        .commodity-detail-content-ringht-category-serve-option-2,
        .commodity-detail-content-ringht-category-serve-option-3,
        .commodity-detail-content-ringht-category-serve-option-4 {
          margin: 10px 5px 10px 10px;
          cursor: pointer;
          padding: 2px 0 2px 0;
          width: 80px;
          height: 20px;
          font-size: 15px;
          background: #ff9800;
          color: #fff;
          font-weight: 550;
          border-radius: 5px;
          text-align: center;
        }
      }
    }
    .commodity-detail-content-ringht-category-divider {
      margin-bottom: 20px;
    }
    .commodity-detail-content-ringht-category-recycle {
      width: 93%;
      margin-bottom: 20px;

      .commodity-detail-content-ringht-category-divider-content {
        display: flex;
        margin: 10px 20px 10px 20px;
        width: 90%;
        height: 50px;
        border-radius: 10px;
        background: #fafafa;

        .commodity-detail-content-ringht-category-divider-content-info {
          display: flex;
          flex-wrap: wrap;
          .commodity-detail-content-ringht-category-divider-content-info-1,
          .commodity-detail-content-ringht-category-divider-content-info-2,
          .commodity-detail-content-ringht-category-divider-content-info-3,
          .commodity-detail-content-ringht-category-divider-content-info-4 {
            padding-top: 18px;
            margin-left: 20px;
            flex-wrap: wrap;
            display: flex;
            font-size: 12px;
            color: #606266;

            img {
              width: 15px;
              height: 15px;
              opacity: 0.5;
            }
          }
        }
      }
    }
    .commodity-detail-content-ringht-category-dispose {
      width: 90%;
      justify-content: space-around;
      display: flex;
      .commodity-detail-content-ringht-category-dispose-cart,
      .commodity-detail-content-ringht-category-dispose-purchase {
        width: 110px;
        height: 40px;
        border-radius: 8px;
        border: 0px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 550;
        color: #fff;
      }
      .commodity-detail-content-ringht-category-dispose-cart {
        background-color: #ff9800;
        transition: background 0.3s;
        &:hover {
          background: #1aad19;
        }
      }
      .commodity-detail-content-ringht-category-dispose-purchase {
        background: #ff0f23;
        transition: background 0.3s;
        &:hover {
          background: #1aad19;
        }
      }
    }
  }
}
</style>
